// ---------------vue面试题----------------- //
// active-class是哪个组件的属性？嵌套路由怎么定义？
{
  /* 
  active-class是transition动画组件的属性
  渲染页面router-view，跳转页面router-link，然后在路由js配置一下跳转
  */
}

// 怎么定义vue-router的动态路由？怎么获取传过来的动态参数？
{
  /* 
  在路由配置页面写跳转的页面，页面后面:参数
  router-link 标签上传递参数，props接收参数

  在router目录下配置js文件，path属性后面加上:参数
  给页面发送参数在router-link上加上:to="{name:页面名称,params:参数}"
  */
}

// v-model是什么？怎么使用？ vue中标签怎么绑定事件？
{
  // v-model是双向数据绑定，他使用在表单元素上 v-model="data数据名"  v-on.click="" @click=""
}

// vuex是什么？怎么使用？哪种功能场景使用它？
{
  /* 
  vuex状态管理器，先npm安装一下，然后配置一下vuex的相关js信息-比如要共享数据的是哪个参数变量（相关信息自己做了笔记）
  当数据传递多个页面（共享变量）你无法解决的情况下，你就可以使用vuex
  */
}

// mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？
{
  /* 
  mvvm是 数据层-模板层-vm是二者中的中间件虚拟vdom层，用于处理数据与模板层的之间联系
他和JQ区别是，JQ是MVC模式的代表，JQ的操作是直接操作视图层dom
  而mvvm的框架，我们只需要关心数据层处理，然后所有事件都交给vdom中间件处理渲染页面

  Model 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
  View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
  ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View

  在MVVM架构下，View和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
  ViewModel 通过双向数据绑定把 View 层和 Model层连接了起来，而View和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理
  */
}

// 导航钩子有哪些？它们有哪些参数？
{
}

// Vue的双向数据绑定原理是什么？
{
}

// 请详细说下你对vue生命周期的理解？
{
  /* 
  挂载阶段
  beforeCreated、created
  
  创建阶段
  beforeMounted、mounted

  更新阶段
  beforeUpdate、update

  销毁阶段
  beforeDestory、destory

  错误捕获生命周期 errorCaptured
  */
}

// 请说下封装 vue 组件的过程？
{
}

// vue-loader是什么？使用它的用途有哪些
{
}

// vue父子组建生命周期调用顺序？
{
  /* 
  加载渲染过程 
    父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted 
  
  子组件更新过程 
    父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated 
  
  父组件更新过程 
    父 beforeUpdate -> 父 updated 

  销毁过程 
    父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
  */
}

// Vue中computed实现原理
{
  /*  */
}

// vue双向绑定原理？Object.defineProperty()
{
  /*
  vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue追踪依赖，在属性被访问和修改时通知变化。

  vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。
  */
}

// vue2和vue3区别，利弊说一下
{
  /* 
  1、数据监听
  vue2双向数据绑定底层使用的是Object.defineProperty实现的，并且嵌套中还有对象是需要递归处理监听的，在就是不能监听数组变更，所以vue2中数组是自己实现了一套监听模式。

  vue3者是使用Proxy实现的双向数据绑定，其实基于proxy监听就是所谓的lazy by default，什么意思呢，就是只要你用到了才会监听，可以理解为‘按需监听’，官方给出的诠释是：速度加倍，同时内存占用还减半。

  2、vue3渲染性能更快
  vue2.x使用的Virtual Dom实现的渲染，每次更新数据都会比对每个vdom节点是否有变化，props是否有变化。
  vue3中Virtual Dom模板树中进行标记是否是静态标签、动态标签（挂载动态处理函数及信息），如果是动态模板标签才进行对比处理，从而减少vdom计算生成的时间。
  
  服务端渲染的话，纯静态的标签代码在vue3中会尽可能的转成纯字符串，部份:id="foo"类似这样的也会嵌入在字符串入，
  vue2.x基于Virtual Dom然后处理去渲染出来的，性能比较慢。

  3、vue3打包体积更小
  vue3在打包的时候会进行分析，没有用到的API模块不会打包进来（tree shaking），从而减少打包体积。

  4、事件监听缓存
  vue3中第一次生成事件的时候，会在你绑定的事件函数外层包裹一个函数，然后缓存在一个数组中去，当第二点渲染或点击的时候，会优先在缓存中获取此函数，达到事件缓存机制。
  在react hook中传递props函数时，每次都会创建一遍，需要自己使用useMemo包裹优化，vue3就是默认底层帮你做好了这件事件，缓存好了此函数。
  */
}

// computed watch methods区别？
{
  /* 
  methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。必须要有一定的触发条件才能执行，如点击事件

  computed计算属性，是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

  watch侦听属性，观察与响应数据变动，当侦听的属性变动的时候会触发相应watch中的函数

  默认加载的时候先computed再watch，不执行methods；
  */
}

// nextTick实现原理
{
  /* 
  nextTick延迟调用优先级如下，当不支持该方法时会往下找其它方法：
  
  1、使用Promise方法（微任务），进行dom更新后回调callback方法
  2、如果Promise不支持,使用MutationObserver，通过监听Dom元素变动后触发相应函数
  3、两种不支持的话,就使用setTimeout
  */
}

// v-if 和 v-show 区别
{
  /*
  v-if按照条件是否渲染，v-show是display的block或none；
  if是直接控制DOM是否显示，show只是控制css，对DOM不控制性能会好
  */
}

// <keep-alive></keep-alive>的作用是什么?
{
  /*
  <keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染
  比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染
  */
}

// 
{
  /*
  */
}

// 
{
  /*
  */
}

// 
{
  /*
  */
}

// 
{
  /*
  */
}

